<template>
  <div class="container pd50">
    <!-- <form action="/">
            <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                show-action
                @search="onSearch"
                @cancel="onCancel"
            />
        </form> -->
    <nav-bar></nav-bar>
    <van-swipe :autoplay="3000" indicator-color="white" class="home-swiper">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.coverImg" @click="onDetailClick(item.id)" :alt="item.id" />
      </van-swipe-item>
    </van-swipe>
    <div class="main">
      <!-- <div class="section-header common-h2"><span class="common-h2-title">商品列表</span></div> -->
      <van-dropdown-menu>
        <van-dropdown-item @change="overItem"
        v-model="selectValue" :options="sideNavList" />
      </van-dropdown-menu>
      <div class="list">
        <van-row>
          <van-col span="12" v-for="item in goodsList" :key="item.id">
            <div class="list-item" @click="onDetailClick(item.id)">
              <!-- <div class="list-item-tag" v-if="item.recommendStatus">推荐</div> -->
              <img class="list-item-img" :src="item.coverImg" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd"><span class="ui-c-red">￥{{item.sellPrice}}</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '../../components/navBar/index'
export default {
  data() {
    return {
      active: 0,
      images: [],
      value: '',
      banner: [],
      selectValue: '', // 选中的值
      sideNavList: [], // 首页分类列表
      goodsList: [],
      goodsMap: {},
      pageQuery: {
        pageNum: 1,
        pageSize: 4
      }
    }
  },
  components: {
    NavBar
  },
  created() {
    this.getBannerList()
    this.getVarity()
    // this.getGoodsList()
  },
  methods: {
    onSearch() { },
    onCancel() { },
    /**
     * 获取顶部banner列表
     */
    getBannerList() {
      this.$api.shop.getBannerList(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.banner = res.data.records
        }
      })
    },
    getVarity() {
      this.$api.shop.getVarityList().then(res => {
        if (res.code === 200) {
          this.sideNavList = res.data.map(item => {
            return {
              text: item.typeName,
              value: item.id
            }
          })
          this.selectValue = res.data[0].id
          this.overItem(res.data[0].id)
        }
      })
    },
    overItem(item) {
      const query = {
        typeId: item
      }
      this.$api.shop.getGoodsByVarity(query).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
        }
      })
    },
    /**
     * 获取货品列表
     */
    getGoodsList() {
      this.$api.shop.getAllGoods().then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
        }
      })
    },
    onDetailClick(id) {
      this.$router.push({ path: `/goods-detail/${id}` })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  padding-top: 54px;
}
.home-swiper,.home-swiper img {
  width: 100%;
  height: 200px;
}
.common-h2 {
  background: none;
}
.list {
  padding-left: 5px;
  padding-right: 5px;
  .van-col {
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
  }

  &-item {
    position:relative;
    text-align: left;
    overflow: hidden;
    background: #fff;
    // border-radius: 8px;
    // box-shadow: 0px 2px 4px 3px rgba(243, 243, 243, 0.5);
  &-tag {
    position: absolute;
    top: 15px;
    left: 0;
    background-color: #f44;
    display: inline-block;
    padding: 0.2em 0.5em;
    color: #fff;
    font-size: 10px;
    line-height: normal;
    border-radius: 0 0.8em 0.8em 0;
    padding-right: 0.6em;
  }
  &-img {
    display: block;
    width: 100%;
    height: 160px;
  }
  &-hd {
    padding: 10px 10px 0;
    font-size: 14px;
    color: #333;
    font-size: 14px;
    // margin-bottom: 5px;
  }
  &-ft{
        padding: 10px 10px;
    display: block;
    font-size: 14px;
  }
  &-bd {
    padding: 10px 10px;
    display: block;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  }
  &-item:nth-child(even) {
    // margin-left:
  }

}
</style>
